<template>
    <div>
      <div class="avatar-wrapper" @click="onEdit">
        <van-row>
          <van-col span="20">
            <!-- 头像 -->
            <div class="avatar">
              <van-image round width="3.5rem" height="3.5rem" :src="userInfo.avatar"/>
              <div style="text-align: left; margin-left: 10px">
                <div class="author-name" style="font-size: 18px;font-weight: bold">{{userInfo.nick}}</div>
                <div class="author-time" style="font-size: 14px; color: #A0A0A0;">{{userInfo.signature}}</div>
              </div>
            </div>
          </van-col>
          <van-col span="4">
            <van-icon name="edit" size="20px" style="padding-top: 8px"></van-icon>
            <div style="font-size: 12px;">编辑</div>
          </van-col>
        </van-row>
      </div>
      <div style="background-color: #F5F5F5; height: 5px"></div>
      <!-- 九宫格 -->
      <van-grid :column-num="5" icon-size="30px" square :border="false">
        <van-grid-item v-for="(item,idx) in grids" :key="idx" :icon="item.img" :text="item.txt" @click="onClickGrid(idx)"/>
      </van-grid>
      <div style="background-color: #F5F5F5; height: 5px"></div>
      <!-- 列表 -->
      <van-cell v-for="(item,idx) in list" :key="idx" @click="onClickList(idx)">
        <van-row>
          <van-col span="23">
            <div style="display: flex; justify-content: flex-start; align-items: center">
              <van-icon :name="item.img" size="20px"></van-icon>
              <span style="font-size:16px; margin-left: 10px">{{item.txt}}</span>
            </div>
          </van-col>
          <van-col span="1">
            <van-icon name="arrow"></van-icon>
          </van-col>
        </van-row>
      </van-cell>
    </div>
</template>

<script>
export default {
  name: 'Mine',
  data () {
    return {
      avatar: require('../../assets/avatar/4.jpg'), // 头像
      grids: [
        { txt: '我的主页', img: require('../../assets/icon/car.png'), link: '/userHome' },
        { txt: '粉丝关注', img: require('../../assets/icon/wx.png'), link: '/friend' },
        { txt: '黑名单', img: require('../../assets/icon/wx.png'), link: '/black' },
        { txt: '删帖申请', img: require('../../assets/icon/home.png'), link: '' },
        { txt: '草稿箱', img: require('../../assets/icon/home.png'), link: '' },
        { txt: '企业认证', img: require('../../assets/icon/car.png'), link: '' },
        { txt: '广告合作', img: require('../../assets/icon/job2.png'), link: '' },
        { txt: '意见建议', img: require('../../assets/icon/home.png'), link: '' },
        { txt: '投诉举报', img: require('../../assets/icon/car.png'), link: '' },
        { txt: '联系客服', img: require('../../assets/icon/car.png'), link: '' }
      ],
      list: [
        { txt: '我的帖子', img: require('../../assets/icon/car.png'), link: '/userArticleList' },
        { txt: '收藏夹', img: require('../../assets/icon/home.png'), link: '/favorite' },
        { txt: '浏览历史', img: require('../../assets/icon/job2.png'), link: '/readHistory' },
        { txt: '朋友圈', img: require('../../assets/icon/wx.png'), link: '/moments' },
        { txt: '打赏记录', img: require('../../assets/icon/home.png'), link: '' },
        { txt: '设置', img: require('../../assets/icon/setting.png'), link: '' }
      ]
    }
  },
  methods: {
    onEdit () {
      if (!this.userInfo.id) {
        this.$router.push('/login')
      } else {
        this.$router.push('/userInfo')
      }
    },
    // 点击九宫格
    onClickGrid (idx) {
      // 是否登录
      if (!this.$store.getters.GetUserToken) {
        this.$router.push('/login')
        return
      }
      if (this.grids[idx].link) {
        this.$router.push({ path: this.grids[idx].link, query: { id: this.$store.state.user.id } })
      } else {
        this.$toast('敬请期待')
      }
    },
    // 点击列表
    onClickList (idx) {
      // 是否登录
      if (!this.$store.getters.GetUserToken) {
        this.$router.push('/login')
        return
      }
      if (this.list[idx].link) {
        this.$router.push({ path: this.list[idx].link, query: { id: this.userInfo.id } })
      } else {
        this.$toast('敬请期待')
      }
    }
  },
  computed: {
    userInfo: function () {
      let userInfo = this.$store.getters.GetUser
      if (!userInfo) {
        return { nick: '点此登录', signature: '' }
      }
      if (!userInfo.signature) {
        userInfo.signature = '暂无签名，快去编辑吧~'
      }
      return userInfo
    }
  }
}
</script>

<style scoped type="scss">
  .avatar{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .avatar-wrapper{
    padding: 20px 0px 20px 20px
  }
</style>
